<!-- 功能页面 头部 -->
<template>
  <div id="header-function">
    <!-- logo -->
    <div class="logo-box">
      <router-link to="/adminLogin" class="logo-box-link">
        <div class="logo-img-box">
          <span class="head_logo_test">知乎信息管理系统</span>
<!--          <img class="logo-img" src="../../../assets/logo_name.png" alt="logo图标">-->
<!--          <img class="logo-img" src="../../../assets/logo_move.gif" alt="">-->
        </div>
      </router-link>
    </div>
    <!-- 个人下拉框 -->
    <div class="personal-menu-box">
      <div class="personal-down-menu-box">
        <div class="personal-menu-child-head-img-box">
          <img src="../../../assets/user-sex-male.png" alt="" style="height: 40px; width: 40px; float: left">
          <span class="personal-menu-child-head-name">用户名字</span>
        </div>
        <div class="personal-menu-child-head-link-box">
          <router-link to="/adminHomes/home" class="personal-menu-child-head">基本资料</router-link>
          <router-link to="/adminHomes/home" class="personal-menu-child-head">实名认证</router-link>
          <router-link to="/adminHomes/home" class="personal-menu-child-head">安全设置</router-link>
        </div>
        <div class="personal-menu-child-body-box">
          <router-link to="/adminHomes/home" class="personal-menu-child-body">权限查看</router-link>
          <router-link to="/adminHomes/home" class="personal-menu-child-body">安全检查</router-link>
          <router-link to="/adminHomes/home" class="personal-menu-child-body">会员权益</router-link>
          <router-link to="/adminHomes/home" class="personal-menu-child-body">会员积分</router-link>
        </div>
        <div><a @click="deleteLogin" class="personal-menu-child-exit">退出知乎管理平台</a></div>
      </div>
      <router-link to="/adminHomes/home" class="personal-menu-box-link"><img src="../../../assets/user-sex-male.png" class="personal-menu-img" alt=""></router-link>
    </div>
    <!-- 其他下拉框 -->
    <DownMenu menuName="用户信息" :lists="List1" menuPath=""></DownMenu>
    <DownMenu menuName="支持与服务" :lists="List2" menuPath=""></DownMenu>
    <DownMenu menuName="浏览量" :lists="List3" menuPath=""></DownMenu>
    <DownMenu menuName="消息" :lists="List4" menuPath=""></DownMenu>
    <!-- 搜索框 -->
    <SearchBox></SearchBox>
  </div>
</template>

<script>
import DownMenu from './DownMenu'
import SearchBox from './SearchBox'
export default {
  name: 'header-function',
  components: {
    'DownMenu': DownMenu,
    'SearchBox': SearchBox
  },
  data () {
    return {
      List1: [
        { childPath: '/adminHomes/home', childName: '用户增加' },
        { childPath: '/adminHomes/home', childName: '用户删除' },
        { childPath: '/adminHomes/home', childName: '修改信息' },
        { childPath: '/adminHomes/home', childName: '用户查询' }
      ],
      List2: [
        { childPath: '/adminHomes/home', childName: '新知乎简介' },
        { childPath: '/adminHomes/home', childName: '知乎会员管理' }
      ],
      List3: [
        { childPath: '/adminHomes/home', childName: '查看历史' },
        { childPath: '/adminHomes/home', childName: '历史浏览' },
        { childPath: '/adminHomes/home', childName: '浏览数据修改' }
      ],
      List4: [
        { childPath: '/adminHomes/home', childName: '最新消息' },
        { childPath: '/adminHomes/home', childName: '历史记录' },
        { childPath: '/adminHomes/home', childName: '推荐' }
      ]
    }
  },
  computed: {
  },
  methods: {
    deleteLogin () {
      this.$store.commit('isAdminLogin', '0')
      this.$router.push({path: '/adminLogin'})
    }
  }
}
</script>

<style scoped>
  /*@import '../../../static/css/Parks.css';*/
  #header-function {
    height: 50px;
    width: 100%;
    z-index: 99;
    position: fixed;
    background-color: #252a2f;
  }

  .logo-box {
    height: 50px;
    width: auto;
    position: relative;
    float: left;
  }

  .logo-img-box {
    height: 100%;
    width: auto;
  }

  .logo-img-box:hover {
    background-color: #191d21;
  }

  .logo-img {
    height: 20px;
    width: 85px;
    left: 10px;
    top: 14px;
    position: absolute;
  }

  .head_logo_test{
    line-height: 47px;
    font-size: 20px;
    color: white;
    padding: 0px 15px;
  }

  /* 用户下拉框 */
  .personal-menu-box {
    position: relative;
    display: inline-block;
    float: right;
  }

  .personal-menu-img {
    height: 50px;
    width: 50px;
    text-align: center;
    color: white;
    font-size: 14px;
    line-height: 50px;
    padding: 10px;
  }

  .personal-menu-img:hover {
    background-color: #05080c;
  }

  .personal-down-menu-box:hover + .personal-menu-box-link > .personal-menu-img{
    background-color: #191d21;
  }

  .personal-down-menu-box {
    right: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    margin-top: 50px;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #191d21;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
    -webkit-transition: opacity .15s,visibility 0s .15s;
    transition: opacity .15s,visibility 0s .15s;
    white-space: nowrap;
  }

  .personal-menu-box:hover .personal-down-menu-box {
    visibility: visible;
    opacity: 1;
  }

  .personal-menu-child-head-img-box {
    padding-left: 10px;
    padding-top: 5px;
  }

  .personal-menu-child-head-name {
    float: left;
    font-size: 12px;
    color: white;
    font-weight: normal;
    line-height: 40px;
    padding-left: 10px;
  }

  .personal-menu-child-head-link-box{
    width: 100%;
    float: left;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid hsla(0,0%,100%,.1);
  }

  .personal-menu-child-head {
    color: #dbdbdb;
    font-size: 12px;
    padding: 7px 15px 7px 15px;
    font-weight: normal;
  }

  .personal-menu-child-body-box {
    height: 100%;
    width: 100%;
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .personal-menu-child-body {
    width: 100%;
    color: white;
    font-size: 12px;
    text-align: left;
    padding: 7px 35px 7px 15px;
    float: left;
    font-weight: normal;
  }

  .personal-menu-child-exit {
    width: 100%;
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 10px 90px 10px 90px;
    float: left;
    font-weight: normal;
    border-top: 1px solid hsla(0,0%,100%,.1);;
  }

  .personal-menu-child-exit:hover,.personal-menu-child-body:hover,.personal-menu-child-head:hover {
    color: #00c1de;
  }
</style>
